<template>
  <!-- 选择 -->
  <div class="design-right" v-show="dataTypeRef === 'normal'">
    <div
      class="desgin-right-part desgin-frame thumb"
      :style="{ width: width + '%' }"
      v-for="(item, key) in itemData"
      @click="() => clickDesgin(key)"
    >
      <div class="img" v-show="item.img">
        <img :src="publicUrl(item.img)" />
      </div>
      <div class="title">
        {{ item.title }}
      </div>
      <div class="frame" v-show="desginValue == key"></div>
    </div>
    
    <div
      class="desgin-frame"
      :style="{ width: width + '%' }"
      v-for="index of complete"
    ></div>
  </div>
  <!--  -->
  <!-- 文案 -->
  <div class="design-input" v-show="dataTypeRef === 'text'">
    <input
      v-model="desginValue"
      class="input"
      placeholder="请输入文案"
      @blur="inputFocus"
    />
  </div>
  <!--  -->
  <!-- 图片 -->
  <div class="disgin-upload" v-show="dataTypeRef === 'upload'">
    <div
      class="desgin-right-part desgin-frame thumb"
      :style="{ width: width + '%' }"
      @click="uploadFunc"
    >
      <div class="img" >
        <div class="img-close" v-show="imgShow" title="删除图片" @click.stop="delImg ">
        <img :src="publicUrl(`/images/img-close.png`)">
      </div>
        <img
          :style="imgShow ? {}:{height:'50%',width:'60%'}"
          :src="imgShow ? imgShow : publicUrl(`/images/add-img.png`)"
        />
      </div>
      <div class="title">上传图片</div>

     
    </div>
  </div>
  <!--  -->
</template>
<script setup lang="ts" name="">
import { publicUrl, surplusDiv } from "@/utils/util";
import { ref, computed } from "vue";
import { DesignItem } from "../../interface";
import { toast } from "vue3-toastify";

import upload from "@/utils/getFile";
import { fileToBase64Async } from "@/utils/util";
const { width } = withDefaults(
  defineProps<{
    width?: number;
  }>(),
  {
    width: 23,
  }
);
const complete = computed((): number => {
  return dataTypeRef.value === "normal"
    ? surplusDiv(Object.keys(itemData.value).length, Math.floor(100 / width))
    : 0;
});

const emits = defineEmits<{
  (event: "changeValue", key: number | undefined | File | string): void;
}>();

const itemData = ref<{ [key: number]: DesignItem }>({});

const desginValue = ref<number | undefined | File | string>(undefined);

const dataTypeRef = ref<"upload" | "normal" | "text">("normal");

const imgShow = ref<string | undefined>(undefined);

const clickDesgin = (key: number) => {
  desginValue.value = desginValue.value === key ? undefined : key;
  emits("changeValue", desginValue.value);
};

const initNormal = (
  data: { [key: number]: DesignItem },
  value: number | undefined | string
) => {
  dataTypeRef.value = "normal";
  itemData.value = data;
  desginValue.value = value;
};

const initUpload = (value: File | undefined) => {
  desginValue.value = value;
  dataTypeRef.value = "upload";
};
const initText = (value: string | undefined) => {
  desginValue.value = value;
  dataTypeRef.value = "text";
};

const uploadFunc = () => {
  upload("image", 500, {
    errorResult: (msg: string) => toast.error(msg),
    successResult: async (file: File) => {
      // desginValue.value = file;
      imgShow.value = await fileToBase64Async(file);
      emits("changeValue", file);
    },
  });
};

const inputFocus = () => {
  emits("changeValue", desginValue.value);
};
const delImg = ()=>{
  imgShow.value = undefined;
  emits("changeValue", undefined);
}

defineExpose({ initNormal, initUpload, initText });
</script>
<style scoped lang="scss">
@import "./index.scss";
</style>
